<template>
	<view>
		<dsl-navbar title="服务费报表" isBack bgTopImg="white"></dsl-navbar>
		<view class="serve_message text-white text-center ">
			<view class="padding-top">
				总服务费（元）
			</view>
			<view class="padding-top-sm">
				￥{{serveData.sum}}
			</view>
			<view class="padding-top-xl">
				相比上月增长 {{serveData.sumIncrease}}%
			</view>
			<view class="message_number text-sm ">
				总人数：{{serveData.userCount}}人
			</view>
		</view>
		<view class="margin-top-xl bg-white margin radius">
			<qiun-data-charts type="demotype" :opts="chatOpt" :chartData="chatData" />
		</view>
		<view class="padding bg-white margin radius ">
			<view class="rowsb padding-bottom solid-bottom"
			@click="$tools.push('/pages/workbench/modules/zongji?status=1')">
				<view>
					<view class="text-lg text-bold">总计</view>
					<view class="text-sm text-gray">相比上月增长 {{serveData.sumIncrease}}%</view>
				</view>
				<view class="align-center">
					<text class="text-red text-xl">{{serveData.sum}}</text>
					<text class="cuIcon-right margin-left-sm"></text>
				</view>
			</view>
			<view class="rowsb padding-tb solid-bottom" 
			@click="$tools.push('/pages/workbench/modules/zongji?status=2')">
				<view>
					<view class="text-lg text-bold">人才库</view>
					<view class="text-sm text-gray">相比上月增长 {{serveData.depotIncrease}}%</view>
				</view>
				<view class="align-center">
					<text class="text-red text-xl">{{serveData.depot}}</text>
					<text class="cuIcon-right margin-left-sm"></text>
				</view>
			</view>
			<view class="rowsb padding-tb solid-bottom"
			@click="$tools.push('/pages/workbench/modules/zongji?status=3')">
				<view>
					<view class="text-lg text-bold">保入职</view>
					<view class="text-sm text-gray">相比上月增长 {{serveData.guaranteeIncrease}}%</view>
				</view>
				<view class="align-center">
					<text class="text-red text-xl">{{serveData.guarantee}}</text>
					<text class="cuIcon-right margin-left-sm"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		serviceChart,
		serviceDetail
	} from '../../../common/path.js'
	import EChart from '@/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		data() {
			return {
				firmSalary: {},
				chatData: {},
				serveData:{},//服务费详情
				chatOpt: {
					xAxis: {
						boundaryGap: 'justify'
					},

					legend: {
						margin: '20',
						position: 'top',
						series: {
							legendShape: 'circle'
						}
					},

				}
			}
		},
		components: {
			EChart
		},
		onLoad() {
			this.chatData ={}
			this.serviceChart() //折线图
			this.serviceDetail() //详情
		},
		methods: {
			//折线图
			serviceChart() {
				let data = {}
				this.Http.POST(serviceChart, data).then(res=>{
					if(res.code ==1){
						console.log('[服务费]',res.data);
						this.chatData = res.data
						
					}
				})
			},
			//服务费报表
			serviceDetail(){
				let data = {}
				this.Http.POST(serviceDetail,data).then(res=>{
					if(res.code == 1){
						console.log('[详情]',res);
						this.serveData = res.data
					}else{
						setTimeout(r=>{
							tools.showToast(res.msg)
						},3000)
					}
				})
			}
		
		},
	}
</script>

<style>
	.serve_message {
		width: 686rpx;
		height: 371rpx;
		background: linear-gradient(343deg, #2294FF 0%, #47AEFF 100%);
		box-shadow: 0px 0px 20rpx rgba(51, 51, 51, 0.16);
		opacity: 1;
		border-radius: 25rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.message_number {
		width: 380rpx;
		height: 50rpx;
		background: #0074E1;
		opacity: 1;
		line-height: 50rpx;
		text-align: center;
		border-radius: 99rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	page {
		background: #F7F6FA;
	}

</style>
